<template>
  <van-nav-bar title="我的订单" fixed placeholder :border="false" />
  <van-tabbar :fixed="false" router>
    <van-tabbar-item @click="jump">
      <span>待付款</span>
      <template #icon="props">
        <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48"
          fill="rgba(255, 141, 26, 1)">
          <path d="M0 0h48v48H0z" fill="none"></path>
          <path
            d="M40 24c0-2.21 1.79-4 4-4v-8c0-2.21-1.79-4-4-4H8c-2.21 0-3.98 1.79-3.98 4l-.01 8C6.22 20.01 8 21.8 8 24c0 2.21-1.79 4-3.99 4L4 36c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4v-8c-2.21 0-4-1.79-4-4zm-8.84 9.6L24 29l-7.16 4.6L19 25.37l-6.58-5.38 8.49-.5L24 11.6l3.09 7.89 8.49.5L29 25.37l2.16 8.23z">
          </path>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item :to="{ path: '/myOrder', query: { active: 2 } }">
      <span>待使用</span>
      <template #icon="props">
        <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48"
          fill="rgba(255, 141, 26, 1)">
          <path d="M0 0h48v48H0z" fill="none"></path>
          <path
            d="M38 2H10C7.79 2 6.02 3.79 6.02 6L6 31.87c0 1.38.7 2.6 1.76 3.32L23.99 46l16.23-10.81c1.06-.72 1.76-1.94 1.76-3.32L42 6c0-2.21-1.79-4-4-4zM20 32L10 22l2.83-2.83L20 26.34l15.17-15.17L38 14 20 32z">
          </path>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item :to="{ path: '/myOrder', query: { active: 3 } }">
      <span>待评价</span>
      <template #icon="props">
        <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48"
          fill="rgba(255, 141, 26, 1)">
          <path
            d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM18 22h-4v-4h4v4zm8 0h-4v-4h4v4zm8 0h-4v-4h4v4z">
          </path>
          <path d="M0 0h48v48H0z" fill="none"></path>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item :to="{ path: '/myOrder', query: { active: 4 } }">
      <span>退款/售后</span>
      <template #icon="props">
        <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48"
          fill="rgba(255, 141, 26, 1)">
          <path d="M0 0h48v48H0z" fill="none"></path>
          <path
            d="M22 34h4v-2h2c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2h-6v-2h8v-4h-4v-2h-4v2h-2c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2h-8v4h4v2zM40 8H8c-2.21 0-3.98 1.79-3.98 4L4 36c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H8V12h32v24z">
          </path>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item :to="{ path: '/myOrder' }">
      <span>全部</span>
      <template #icon="props">
        <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48"
          fill="rgba(255, 141, 26, 1)">
          <path
            d="M8 16h8V8H8v8zm12 24h8v-8h-8v8zM8 40h8v-8H8v8zm0-12h8v-8H8v8zm12 0h8v-8h-8v8zM32 8v8h8V8h-8zm-12 8h8V8h-8v8zm12 12h8v-8h-8v8zm0 12h8v-8h-8v8z">
          </path>
          <path d="M0 0h48v48H0z" fill="none"></path>
        </svg>
      </template>
    </van-tabbar-item>
  </van-tabbar>
  <div class="recentOrder">最近订单</div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const jump = () => {

  router.push({ path: '/myOrder', query: { active: 1 } })
}
</script>

<style lang="scss" scoped>
.van-tabbar-item {
  color: rgba(56, 56, 56, 1);

  svg {
    width: 48px;
    height: 48px;
  }
}


.recentOrder {
  margin: 40px 32px;
  color: rgba(56, 56, 56, 1);
  font-size: 32px;
  line-height: 150%;
  font-weight: bold;
}
</style>
